import { defineConfig, UserConfig } from 'vite';
import react from '@vitejs/plugin-react';
import atImport from 'postcss-import';

import path from 'path';

const { resolve } = path;

let fileStr = `@import "@/styles/variables.scss";@import "@/sites/assets/styles/variables.scss";@import '@/styles/theme-default.scss';\n`;


// https://vite.dev/config/
export default defineConfig(async (): Promise<UserConfig> => {
  const mdx = await import('@mdx-js/rollup')
  const remarkGfm = await import('remark-gfm')
  const remarkDirective = await import('remark-directive')
  return {
    plugins: [react(), 
      {
        enforce: 'pre',
        ...mdx.default({
          providerImportSource: '@mdx-js/react',
          mdExtensions: [],
          mdxExtensions: ['.md'],
          remarkPlugins: [remarkGfm.default, remarkDirective.default],
        }),
      },
    ],
    resolve: {
      alias: [
        { find: '@', replacement: resolve(__dirname, './src') },
      ]
    },
    css: {
      preprocessorOptions: {
        scss: {
          // example : additionalData: `@import "./src/design/styles/variables";`
          // dont need include file extend .scss
          additionalData: fileStr,
        },
        postcss: {
          plugins: [atImport({ path: path.join(__dirname, 'src') })],
        },
      },
    },
  }
})
